<template>
  <n-space vertical justify="center" style="margin-top: 50px">
<!--    标题 个人中心-->
    <n-el tag="div" class="title-box">
      <n-space justify="center">
        <n-text size="large" weight="bold">个人中心</n-text>
      </n-space>
    </n-el>
    <n-el tag="div" class="form-box">
      <n-form
          ref="formRef"
          :model="userInfo"
          label-placement="top"
          :label-width="160"
          :disabled="updateDisabled"
      >
        <n-form-item label="用户名" path="inputValue">
          <n-input v-model:value="userInfo.username" placeholder="Input" />
        </n-form-item>
        <n-form-item label="邮箱" path="inputValue">
          <n-input v-model:value="userInfo.email" placeholder="Input" />
        </n-form-item>
        <n-form-item label="姓氏" path="inputValue">
          <n-input v-model:value="userInfo.first_name" placeholder="Input" />
        </n-form-item>
        <n-form-item label="名字" path="inputValue">
          <n-input v-model:value="userInfo.last_name" placeholder="Input" />
        </n-form-item>
        <n-form-item label="注册时间" path="inputValue">
          <n-input v-model:value="userInfo.date_joined" disabled placeholder="Input" />
        </n-form-item>
        <n-form-item label="最后登录时间" path="inputValue">
          <n-input v-model:value="userInfo.last_login" disabled placeholder="Input" />
        </n-form-item>
      </n-form>
      <n-space justify="center" style="margin-top: 20px">
        <n-button
            type="primary"
            :disabled="updateDisabled"
            v-show="!updateDisabled"
            @click="updateUserInfo"
        >
          保存信息
        </n-button>
        <n-button
            type="primary"
            :disabled="!updateDisabled"
            v-show="updateDisabled"
            @click="updateDisabled = false"
        >
          编辑信息
        </n-button>
        <n-button
            type="warning"
            @click="updatePassword">
          修改密码
        </n-button>
      </n-space>
    </n-el>
  </n-space>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {getUserInfo, setUserInfo} from "/@api/hz-system-api";
import {useMessage} from "naive-ui";
import router from "/@/router";
const message = useMessage();

const updateDisabled = ref(true);
const userInfo = ref({
  username: '',
  email: '',
  first_name: '',
  last_name: '',
  last_login: '',
  date_joined: '',
});

// 生命周期 mounted
onMounted(() => {
  loadUserInfo()
});

// 获取个人信息
function loadUserInfo() {
  getUserInfo().then(res => {
    if (res.code === 200) {
      userInfo.value = res.data;
    } else {
      message.error(res.msg);
    }
  });
}

// 更新个人信息
function updateUserInfo() {
  message.success('更新成功');
  console.log(userInfo.value)
  setUserInfo(userInfo.value).then(res => {
    if (res.code === 200) {
      userInfo.value = res.data;
    } else {
      message.error(res.msg);
    }
  });
  updateDisabled.value = true;
}

function updatePassword() {
  router.push('/changePassword');
}
</script>

<style lang="less" scoped>

@media screen and (max-width: 768px) {
  .form-box {
    width: 85%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .form-box {
    width: 50%;
    margin: 0 auto;
  }
}
</style>